<template>
	<div class="selectTemWrap">
        <p class="selectNewTit"><span>为页面选择新的模版：</span></p>
        <ul class="ulArea">
            <li 
                class="listItem" 
                @click="selectTemMet('blank')"
                :class="{'activeItem':activeItem == 'blank','initItem':initType == 'blank'}">
                <a href="javascript:void(0);">空白页</a>
            </li>
            <li 
                class="listItem" 
                @click="selectTemMet('list')"
                :class="{'activeItem':activeItem == 'list','initItem':initType == 'list'}">
                <a href="javascript:void(0);">列表页</a>
            </li>
            <li
                class="listItem" 
                v-if="false"
                @click="selectTemMet('echarts')"
                :class="{'activeItem':activeItem == 'echarts','initItem':initType == 'echarts'}">
                <a href="javascript:void(0);">图表页</a>
            </li>
        </ul>
        <div class="btnArea">
            <el-button @click="cancelTem">取消</el-button>
            <el-button @click="confrimTem" type="primary">确定更改</el-button>
        </div>
	</div>
</template>
<script type="text/javascript">
	import useRoute  from '@/store/route.js'
    import { mapState,mapActions } from 'pinia';
	export default{
		data () {
			return {
				activeItem:'',
                initType:"",
			}
		},
        computed: {
            ...mapState(useRoute, ['nowItem'])
        },
		mounted (){
            //读取当前模版类型
            this.setNowTem();
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			selectTemMet(type){
                if(this.initType == type){
                    return;
                }
                this.activeItem = type;
                this.$emit("changeSelectTem",type)
            },
            cancelTem(){
                this.$emit("cancelTem");
            },
            setNowTem(){
                var _this = this;
                this.$util.native.readJson(this.nowItem).then(res => {
                    _this.initType = res.type;
                }).catch(error => {

                })
            },
            confrimTem(){
                this.$emit('confrimTem',this.activeItem);
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.selectTemWrap{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 200px;
        background-color: white;
        z-index: 10;
        padding: 10px;
        .ulArea{
            padding-left: 0;
            margin-top:8px;
        }
        .listItem{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            padding-left: 10px;
            border: 1px solid #eee;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .activeItem{
            background-color: #409EFF;
            a{
                color: white;
            }
        }
        .initItem{
            background-color: #ccc;
            cursor: not-allowed;
            a{
                color: white;
                cursor: not-allowed;
            }
        }
        .btnArea{
            .el-button{
                width: 45%;
            }
        }
        .selectNewTit{
            font-size: 14px;
            color: #999;
            margin-bottom: 0px;
        }
    }
</style>